
<template>
  <div class="app-container action-account-container">
    <div class="back-content flex-normal">
      <span class="back-icon el-icon-back" @click="$router.go(-1)"></span>
      <span class="back-label">账户开户</span>
    </div>
    <div class="check-status-content flex-column">
      <template v-if="baseData.shopMessageStatus == '3'">
        <svg-icon class="check-success" icon-class="check-success"></svg-icon>
        <div class="status-txt-content flex-normal">
          <span class="status-txt">您的开户申请已受理成功，请完善以下信息，完成开户</span>
        </div>
      </template>
      <template v-if="baseData.shopMessageStatus == '2'">
        <svg-icon class="check-ing" icon-class="check-ing"></svg-icon>
        <div class="status-txt-content flex-normal">
          <span class="status-txt">系统正在审核中，请稍后</span>
        </div>
      </template>
      <template v-if="baseData.shopMessageStatus == '4'">
        <svg-icon class="check-fail" icon-class="check-fail"></svg-icon>
        <div class="status-txt-content flex-normal">
          <span class="status-txt">资质审核失败，请</span>
          <span class="status-btn" @click="jumpPage('actionAccount')">重新提交</span>
        </div>
      </template>
      
    </div>
    <div class="app-dialog" v-if="baseData.shopMessageStatus == '3'">
      <el-form
        class="form-content"
        ref="staff-form" label-position="left"
        :model="currentItem"
        label-width="120px">
        <div class="form-title">对公验证</div>
        <el-form-item class="form-content-item"
            label="账户名称：" prop="name5"
            :rules="{ required: true, message: `账户名称不能为空`, trigger: 'blur'}">
            <div class="form-val flex-normal">
              <el-input v-model="currentItem['name5']" placeholder="请输入账户名称"></el-input>
            </div>
        </el-form-item>
        <el-form-item class="form-content-item"
            label="银行账号：" prop="name5"
            :rules="{ required: true, message: `银行账号不能为空`, trigger: 'blur'}">
            <div class="form-val flex-normal">
              <el-input v-model="currentItem['name5']" placeholder="请输入银行账号"></el-input>
            </div>
        </el-form-item>
        <el-form-item :class="['form-content-item']"
            label="开户地区：" prop="name8"
            :rules="{ required: true, message: `开户地区不能为空`, trigger: 'change'}">
            <div class="form-val flex-normal">
              <el-select v-model="currentItem['name8']" placeholder="请选择开户地区">
                <el-option
                  v-for="item in cardList"
                  :key="item.name" filterable
                  :label="item.label"
                  :value="item.name">
                  <div class="yh-temp flex-normal">
                    <svg-icon class="yh-logo" :icon-class="item.icon"></svg-icon>
                    <span class="yh-label">{{ item.label }}</span>
                  </div>
                </el-option>
              </el-select>
            </div>
        </el-form-item>
        <el-form-item :class="['form-content-item', currentItem['name7'] && 'filled']"
            label="开户行：" prop="name7"
            :rules="{ required: true, message: `开户行不能为空`, trigger: 'change'}">
            <div class="form-val flex-normal">
              <el-select v-model="currentItem['name7']" placeholder="请选择开户行">
                <template v-if="currentItem['name7']" #prefix>
                  <svg-icon class="yh-logo" icon-class="zsyh-logo"></svg-icon>
                </template>
                <el-option
                  v-for="item in cardList"
                  :key="item.name" filterable
                  :label="item.label"
                  :value="item.name">
                  <div class="yh-temp flex-normal">
                    <svg-icon class="yh-logo" :icon-class="item.icon"></svg-icon>
                    <span class="yh-label">{{ item.label }}</span>
                  </div>
                </el-option>
              </el-select>
            </div>
        </el-form-item>
      </el-form>
      <div class="warning-content flex-column">
        <span class="warning-label">打款验证说明</span>
        <div class="list">
          <div class="item flex-normal" v-for="(desc, index) in warningList" :key="index">
            <span class="item-desc">{{ index + 1 }}、</span>
            <span class="item-desc" v-html="desc"></span>
          </div>
        </div>
      </div>
      <div class="btn-container flex-normal">
        <div class="btn-item submit flex-center">
          <span class="btn-txt">提交打款验证</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {LLKeyBord} from '@/utils/tools.js'
import {
  getFinanceIndex, getRandom
} from "@/api/financeManage/shop-finance";
export default {
  data() {
    return {
      boo: {
        loading: true
      },     
      baseData: {
        shopMessageStatus: 1
      },
      currentItem: {},
      cardList: [
        {label: '招商银行', icon: 'zsyh-logo', name: 'zsyh'},
        {label: '建设银行', icon: 'zsyh-logo', name: 'jsyh'},
        {label: '农业银行', icon: 'zsyh-logo', name: 'nyyh'},
      ],
      warningList: [
        '如需充值，请使用手机银行或者网银，打款至存管账户',
        '存管账户转账仅限于工作日工作时间请安排好打款时间；',
        '转账充值操作必须使用与存管账户的同名账户，不支持非同名账户转账；',
        '服务过程中，如果有任何疑问，可致电客服：<br />400-810-0049反馈',
      ],
    };
  },
  mounted(){
    let _self = this
    _self.queryFinanceIndex()
    _self.getRandom()
  },
  methods: {
    jumpPage(routeName){
      let _self = this
      _self.$router.push({name: routeName})
    },
    queryFinanceIndex(){
      let _self = this
      _self.boo.loading = true
      getFinanceIndex().then(res => {
        _self.baseData = res.data
        setTimeout(() => {
          _self.passwordInstance = _self.initPassword()
          _self.passwordInstance2 = _self.initPassword2()
        }, 500)
      }).finally(() => _self.boo.loading = false)
    },
    getRandom(){
      let _self = this
      getRandom().then(res => {
        console.log(res.data)
      })
    },
    initPassword() {
      let _self = this
      let params = {
        click_objId: '#keyboardBtn2', 
        Input_texId: '#LOGPASS2',
        parent_objId: '#ipt_pwd2',
        placeholderId: '#LOGPASS2_SHOW'
      }
      const passowrd = LLKeyBord(params, _self.options)
      passowrd.initOptions()
      return passowrd
    },
    initPassword2() {
      let _self = this
      let params = {
        click_objId: '#keyboardBtn3', 
        Input_texId: '#LOGPASS3',
        parent_objId: '#ipt_pwd3',
        placeholderId: '#LOGPASS3_SHOW'
      }
      const passowrd = LLKeyBord(params, _self.options)
      passowrd.initOptions()
      return passowrd
    },
  }
};
</script>
<style scoped lang="scss">
.back-content{
  padding: vh(25) vw(30);
  .back-icon{
    font-size: vh(26);
    cursor: pointer;
  }
  .back-label{
    margin-left: vw(20);
    font-size: 13px;
    color: #3D3D3D;
  }
}
.action-account-container {
  min-height: calc(100vh - 80px);
  .check-status-content{
    align-items: center;
    justify-content: center;
    margin-bottom: vh(80);
    margin-top: vh(80);
    width: vw(660);
    .check-success{
      width: vh(60);
      height: vh(60);
    }
    .check-ing{
      width: vh(95);
      height: vh(95);
    }
    .check-fail{
      width: vh(95);
      height: vh(95);
    }
    .status-txt-content{
      margin-top: vh(30);
      .status-txt{
        font-size: vh(16);
        color: #3D3D3D;
      }
      .status-btn{
        font-size: vh(16);
        color: #0256FF;
        cursor: pointer;
        margin-left: vh(10);
        font-weight: 400;
      }
    }
  }
  .action-account-main{
    align-items: flex-start;
  }
  .check-warning{
    padding-left: vw(20);
    .desc-icon{
      color: #F7B212;
    }
    .desc-txt{
      margin-left: vw(10);
      font-size: vh(12);
      color: #7F7F7F;
    }
  }
  .warning-content{
    margin-top: vh(40);
    .warning-label{
      color: #3D3D3D;
      font-size: vh(16);
    }
    .list{
      margin-top: vh(15);
      .item{
        margin-bottom: vh(10);
        align-items: flex-start;
      }
      .item-desc{
        color: #3D3D3D;
        font-size: 13px;
      }
    }
  }
  .yh-temp{
    .yh-label{
      margin-left: vh(10);
      font-size: 13px;
    }
  }
  .app-dialog{
    padding: 0 vw(30);
    width: 60%;
    .form-content-item {
      position: relative;
      .code-btn-unit{
        position: absolute;
        left: vw(400);
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        background: rgba(0, 3, 170, 0.1);
        border-radius: vh(3);
        height: vh(36);
        padding: 0 vw(15);
        .btn-txt{
          font-size: 13px;
          color: #0003AA;
        }
      }
    }
    .form-title{
      margin-top: vh(30);
      margin-bottom: vh(20);
      line-height: vh(34);
      font-size: vh(16);
      color: #0003AA;
    }
    .form-val {
      width: vw(360);
      flex-wrap: nowrap;
      &.no-border{
        border: none;
      }
    }
  }
  .btn-container{
    padding-left: vw(30);
    margin-top: vh(80);
    .btn-item{
      height: vh(46);
      border-radius: vh(3);
      padding: 0 vw(60);
      margin-left: vw(110);
      &.submit{
        cursor: pointer;
        background-color: #0003AA;
        .btn-txt{
          color: #fff;
        }
      }
      .btn-txt{
        font-size: vh(16);
      }
    }
  }
}
</style>